import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    ImageBackground,
    Dimensions,
    LayoutAnimation,
    UIManager,
    ScrollView,
} from 'react-native';
import {Button, Input} from 'react-native-elements'

import colors from "../common/colors";
import Global from '../common/global'
import Util from '../common/util'
import {Toast} from 'teaset'
import {loginSuccess} from '../actions/mineAction'
import Api from '../common/api'



export default class Register extends Component {

    static navigationOptions = {
        header: null
    }

    constructor(props) {
        super(props);

        this.state = {
            phone: '',
            pwd: '',
            repwd : '',
            isLoading: false,
        };
    }



    next = () => {
        let {phone, pwd, repwd} = this.state
        if(pwd.length < 6) {
            Toast.info('密码不能少于6位')
            return
        }
        if(pwd != repwd) {
            Toast.info('两次密码输入不一致')
            return
        }

        this.props.navigation.navigate('RegisterInfo', {
            phone,
            pwd
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <ImageBackground
                    source={require('../images/bsign_g.png')}
                    style={styles.bgImage}
                >
                    <ScrollView style={{flex : 1}}>
                        <View style={styles.view}>
                            <Text style={[styles.title, {marginBottom : 20}]}>海洋环境应急指挥</Text>
                            <Text style={[styles.title, {marginBottom : 60}]}>注册</Text>
                            <Input
                                placeholder='手机号'
                                placeholderTextColor={"#ccc"}
                                keyboardType={"numeric"}
                                containerStyle={[styles.containerStyle,  {marginBottom: 20}]}
                                inputStyle={styles.inputStyle}
                                leftIcon={
                                    <Text style={styles.label}>账号</Text>
                                }
                                maxLength={11}
                                selectionColor={"#fff"}
                                onChangeText={(phone) => this.setState({phone})}
                                inputContainerStyle={[styles.inputContainerStyle]}
                            />
                            <Input
                                placeholder='设置密码6-16位'
                                placeholderTextColor={"#ccc"}
                                containerStyle={[styles.containerStyle, {marginBottom: 20}]}
                                inputStyle={styles.inputStyle}
                                secureTextEntry={true}
                                onChangeText={(pwd) => this.setState({pwd})}
                                maxLength={16}
                                selectionColor={"#fff"}
                                leftIcon={
                                    <Text style={styles.label}>密码</Text>
                                }
                                inputContainerStyle={[styles.inputContainerStyle]}
                            />

                            <Input
                                placeholder='再次输入密码'
                                placeholderTextColor={"#ccc"}
                                containerStyle={[styles.containerStyle, {marginBottom: 40}]}
                                inputStyle={styles.inputStyle}
                                secureTextEntry={true}
                                onChangeText={(repwd) => this.setState({repwd})}
                                maxLength={16}
                                selectionColor={"#fff"}
                                leftIcon={
                                    <Text style={styles.label}>密码</Text>
                                }
                                inputContainerStyle={[styles.inputContainerStyle]}
                            />
                            <Button
                                title="下一步"
                                onPress={this.next}
                                loading={false}
                                titleStyle={{ fontSize: 16, color: '#fff'}}
                                buttonStyle={{
                                    backgroundColor: "#176DD7",
                                    width: Global.width - 56,
                                    height: 45,
                                    borderRadius: 4
                                }}
                                containerStyle={{ marginBottom: 20 }}
                            />
                            <View style={{
                                flexDirection: 'row',
                                alignItems : 'center',
                                justifyContent : 'center',
                                width : Global.width,
                                paddingHorizontal : 23
                            }}>
                                <Button
                                    clear
                                    onPress={()=>{this.props.navigation.goBack()}}
                                    title="登录"
                                    titleStyle={{ fontSize: 14, color: '#fff', textAlign: 'right'}}
                                    buttonStyle={styles.link}
                                />

                            </View>
                        </View>
                    </ScrollView>
                </ImageBackground>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    bgImage: {
        flex: 1,
        top: 0,
        left: 0,
        width: Global.width,
        height: Global.height,
        justifyContent: 'center',
        alignItems: 'center',
    },
    view : {
        width: Global.width,
        height: Global.height,
        justifyContent: 'center',
        alignItems: 'center',
        paddingBottom: Global.paddingBottom + 50
    },
    title : {
        fontSize : 20,
        color: '#fff',
        fontWeight : 'bold',
    },
    inputContainerStyle : {
        width: Global.width - 56,
        height: 45,
        borderRadius : 4,
        borderWidth: 1,
        borderColor: '#D5D5D5',
        marginRight : 0
    },
    label : {
        color: '#fff',
        fontSize: 14
    },
    inputStyle : {
        color: '#fff',
        fontSize: 14,
    },
    containerStyle : {
        width: Global.width - 56,
        height: 45,
    },
    link : {
        height : 20,
    }
});
